<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>showData</title>
    {# BootStrap css引入 #}
    <link rel="stylesheet" href="{{ url_for('static',filename='/libs/bootstrap-4.5.0-dist/css/bootstrap.min.css') }}">
    {# fontawesome css引入 #}
    <link rel="stylesheet" href="{{ url_for('static',filename='/libs/fontawesome-free-5.15.1-web/css/all.min.css') }}">
    {# 引入 ECharts 文件 #}
    <script src="{{ url_for('static',filename='/libs/echarts.min.js') }}"></script>
    <script src="../static/js/china.js"></script>
    <script src="../static/js/echarts-wordcloud.min.js"></script>
    <link href="{{ url_for('static',filename='/css/main.css') }}" rel="stylesheet"/>

    <style>
        .bg-pink {
            background-color: #ffb7da;
        }

        .card {
            margin-bottom: 5px;
        }

        .card-body {
            text-align: center;
        }

        .card-body p {
            height: 40px;
            font-size: 30px;
            font-weight: bold;
        }

    </style>

</head>
<body>
<div class="container">

    {% include 'header.html' %}
    <div>
        <div id="c2"></div>
    </div>

    <div class="content-box  ml-3 mr-3" style="margin-top: 820px;">
        <div class="row p-3 pt-1 justify-content-around">
            <div class="card col-3">
                <div class="card-body">
                    <p class="card-title">{# 现有确诊=累计确诊-累计治愈人数-累计死亡人数                    #}
                        现有确诊
                    </p>
                    <p class="text-danger">{{ china_overview_data['confirm'] - china_overview_data['heal'] - china_overview_data['dead'] }}</p>
                    <h5>
                        较上日
                        <span class="text-danger">
                            {% if china_add_overview_data['confirm'] - china_add_overview_data['heal'] - china_add_overview_data['dead'] > 0 %}
                                +
                                {{ china_add_overview_data['confirm'] - china_add_overview_data['heal'] - china_add_overview_data['dead'] }}

                            {% else %}
                                {{ china_add_overview_data['confirm'] - china_add_overview_data['heal'] - china_add_overview_data['dead'] }}

                            {% endif %}
                        </span>
                    </h5>
                </div>
            </div>

            <div class="card col-3">
                <div class="card-body">
                    <p class="card-title">
                        无症状感染者
                    </p>
                    <p class="text-warning">{{ china_overview_data['noInfect'] }}</p>
                    <h5>
                        较上日 <span class="text-warning">+{{ china_add_overview_data['infect'] }} </span></h5>
                </div>
            </div>
            <div class="card col-3">
                <div class="card-body">
                    <p class="card-title">
                        境外输入
                    </p>
                    <p class="text-warning">{{ china_overview_data['importedCase'] }}</p>
                    <h5>
                        较上日 <span class="text-warning"> +{{ china_add_overview_data['importedCase'] }} </span></h5>
                </div>
            </div>

            <div class="w-100 d-none d-md-block"></div>
            <div class="card col-3">
                <div class="card-body">
                    <p class="card-title">
                        累计确诊
                    </p>
                    <p class="text-danger">{{ china_overview_data['confirm'] }}</p>
                    <h5>
                        较上日 <span class="text-danger"> +{{ china_add_overview_data['confirm'] }}</span></h5>
                </div>
            </div>
            <div class="card col-3">
                <div class="card-body">
                    <p class="card-title">
                        累计治愈
                    </p>
                    <p class="text-success">{{ china_overview_data['heal'] }}</p>
                    <h5>
                        较上日 <span class="text-success"> +{{ china_add_overview_data['heal'] }} </span></h5>
                </div>
            </div>
            <div class="card col-3">
                <div class="card-body">
                    <p class="card-title">
                        累计死亡
                    </p>
                    <p class="text-secondary">{{ china_overview_data['dead'] }}</p>
                    <h5>
                        较上日 <span class="text-secondary"> +{{ china_add_overview_data['dead'] }} </span></h5>
                </div>
            </div>
        </div>

    </div>
    {#  城市概览饼图  #}
    <div class="charts_box pl-4 pr-4">
        <div id="city_overview_data" class="w-100" style="height:400px;"></div>
    </div>
    <div class="detailed pr-4 pr-4">
        <p> 全国累计确诊患者分布于 {{ china_city_statis['confirm'] }} 个城市，目前已有 {{ china_city_statis['zeroNowConfirm'] }}
            个城市实现现有确诊“清零”，本统计不包括境外输入病例。 </p>
    </div>
    {#0x0002. 全国地区风险等级情况#}
    <div class="text-title-box mt-5 ml-3 mb-3 badge badge-info">
        <h3 class="text-white">全国地区风险等级情况</h3>
    </div>
    <div class="grade-box">
        <table class="table w-100">
            <thead>
            <tr>
                <th scope="col">省份</th>
                <th scope="col">地区</th>
                <th scope="col">新增确诊</th>
                <th scope="col">现有确诊</th>
                <th scope="col">风险等级</th>
            </tr>
            </thead>
            <tbody>

            {% for city_data in grade_city_data_list %}
                <tr>
                    <th scope="row">{{ city_data['province'] }}</th>
                    <td>{{ city_data['city'] }}</td>
                    {% if city_data['confirmAdd'] > 0 or city_data['grade'] == "部分中风险" %}
                        <td class="text-danger">{{ city_data['confirmAdd'] }}</td>
                        <td>{{ city_data['nowConfirm'] }}</td>
                        <td class="text-danger">{{ city_data['grade'] }}</td>
                    {% else %}
                        <td>{{ city_data['confirmAdd'] }}</td>
                        <td>{{ city_data['nowConfirm'] }}</td>
                        <td>{{ city_data['grade'] }}</td>
                    {% endif %}

                </tr>
            {% endfor %}


            </tbody>
        </table>
    </div>
    {#0x0003. 现有无症状感染者统计图 #}
    <div class="text-title-box mt-5 ml-3 mb-3 badge badge-info">
        <h3 class="text-white">全国无症状感染者统计图</h3>
    </div>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="asy_city_data" class="w-100" style="height:400px;"></div>
    <div id="asy_city_add_data" class="w-100" style="height:400px;"></div>

</div>

<script type="text/javascript">
    // 初始化echarts实例
    var asy_Chart = echarts.init(document.getElementById('asy_city_data'), 'light');
    var asy_add_Chart = echarts.init(document.getElementById('asy_city_add_data'));
    var city_overview_Chart = echarts.init(document.getElementById('city_overview_data'));


    // 城市概览数据饼图
    var city_overview_option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['零病例城市', '有病例城市']
        },
        series: [
            {
                name: '国内城市概况',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'center',
                    normal: {
                        formatter: '{b}  {d}%  ',
                    }
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: {{ china_city_statis['zeroNowConfirm'] }}, name: '零病例城市'},
                    {value: {{ china_city_statis['notZeroNowConfirm'] }}, name: '有病例城市'},
                ]
            }
        ]
    };
    // 现有无症状感染者图表的配置项和数据
    var asy_option = {
        title: {
            text: '现有无症状感染者'
        },
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data: ['人数']
        },
        xAxis: {
            type: 'category',
            data: [
                {% for asy_city_data in now_asy_data %}
                    "{{ asy_city_data['province'] }}",
                {% endfor %}
            ],
            axisLabel: {
                interval: 0,
                rotate: 40
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 人'
            }
        },
        series: [{
            name: '现有无症状感染者',
            type: 'bar',
            data: [
                {% for asy_city_data in now_asy_data %}
                    {{ asy_city_data['confirm'] }},
                {% endfor %}
            ],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }]
    };
    // 新增无症状感染者图表的配置项和数据
    var asy_add_option = {
        title: {
            text: '新增无症状感染者'
        },
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },

        legend: {
            data: ['人数']
        },
        xAxis: {
            type: 'category',
            data: [
                {% for asy_add_city_data in add_asy_data %}
                    {% if asy_add_city_data['increase'] > 0 %}
                        "{{ asy_add_city_data['province'] }}",
                    {% else %}
                    {% endif %}
                {% endfor %}
            ]
        },
        yAxis: {},
        series: [{
            name: '新增无症状感染者',
            type: 'bar',
            data: [
                {% for asy_add_city_data in add_asy_data %}
                    {% if asy_add_city_data['increase'] > 0 %}
                        {{ asy_add_city_data['increase'] }},
                    {% else %}
                    {% endif %}
                {% endfor %}
            ]
        }]
    };

    //地图
    var ec_center_option = {
        title: {
            text: '',
            subtext: '',
            x: 'left'
        },
        tooltip: {
            trigger: 'item'
        },
        //左侧小导航图标
        visualMap: {
            show: true,
            x: 'left',
            y: 'bottom',
            textStyle: {
                fontSize: 8,
            },
            splitList: [{start: 1, end: 9},
                {start: 10, end: 99},
                {start: 100, end: 999},
                {start: 1000, end: 9999},
                {start: 10000}],
            color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']
        },
        //配置属性
        series: [{
            name: '累计确诊人数',
            type: 'map',
            mapType: 'china',
            roam: false, //拖动和缩放
            itemStyle: {
                normal: {
                    borderWidth: .5, //区域边框宽度
                    borderColor: '#009fe8', //区域边框颜色
                    areaColor: "#ffefd5", //区域颜色
                },
                emphasis: { //鼠标滑过地图高亮的相关设置
                    borderWidth: .5,
                    borderColor: '#4b0082',
                    areaColor: "#fff",
                }
            },
            label: {
                normal: {
                    show: true, //省份名称
                    fontSize: 8,
                },
                emphasis: {
                    show: true,
                    fontSize: 8,
                }
            },
            data: []
        }]
    };

    // 显示图表
    city_overview_Chart.setOption(city_overview_option)
    asy_Chart.setOption(asy_option);
    asy_add_Chart.setOption(asy_add_option);

</script>

{# BootStrap js引入 #}
<script src="{{ url_for('static',filename='/libs/jquery-3.5.1.min.js') }}"></script>
<script src="{{ url_for('static',filename='/libs/popper.min.js') }}"></script>
<script src="{{ url_for('static',filename='/libs/bootstrap-4.5.0-dist/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static',filename='/js/center.js') }}"></script>
<script src="{{ url_for('static',filename='/js/controller.js') }}"></script>
</body>
</html>